<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title linecamp-1">{{ lang_extension.activityExtension }}</view>
				<view class="flex-center" @click="jumpUrl(`/pages/user/personal/extension/poster/poster`)">
					<image src="@/static/image/common/extension_code.png" style="width: 28rpx; height: 28rpx;"
						class="clear-flex u-m-r-10"></image>
					<view>{{ lang_extension.extensionCode }}</view>
				</view>
			</view>

			<!-- tabs -->
			<view class="flex-center-around" style="padding: 16rpx 30rpx 20rpx;">
				<view v-for="(item, index) in tabs" :key="index"
					:class="['u-f-34 u-lh-48 tab-item', index === tabIndex ? 'font-medio' : 'color-grew']"
					@click="tabIndex = index">
					<view class="flex-center">{{ !index ? lang_common[item.key] : lang_extension[item.key] }}</view>

					<view v-if="tabIndex === index" class="tab-item-line"></view>
				</view>
			</view>
			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>

		<!-- 列表 -->
		<swiper style="height: calc(100vh - 188rpx - var(--status-bar-height));background-color: #FFFFFF;"
			:current="tabIndex" @change="tabIndex = $event.detail.current">
			<swiper-item v-for="(item, index) in tabs" :key="index">
				<extension-list ref="mescrollItem" :i="index + 1" :index="tabIndex"></extension-list>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import ExtensionList from './components/extension-list.vue'
	export default {
		components: {
			ExtensionList
		},
		data() {
			// 初始化顶部导航栏
			let tabs = ['all', 'started', 'attended'].map((item, index) => {
				let result = {
					key: item,
					value: index
				}
				return result
			})

			return {
				tabs,
				tabIndex: 0
			}
		},
		// 获取类型
		onLoad({
			type
		}) {
			if (type) {
				this.tabIndex = this.tabs.findIndex(item => item.key === type)
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.tab-item {
		position: relative;
		top: 0;
		left: 0;
		width: max-content;

		&-line {
			position: absolute;
			bottom: -20rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 42rpx;
			height: 8rpx;
			background: #333333;
		}
	}
</style>
